<template>
  <div class="user-area">
    <template v-if="orderInfo.accounts && orderInfo.accounts.length > 0 && orderInfo.accounts[0].accountId">
      <div class="second-title">
        <div class="point"></div>
        <span>收款账号</span>
      </div>
      <el-row v-for="(item, key) in orderInfo.accounts"
              :key="key"
              class="account-card">
        <el-row :gutter="10">
          <el-col :span="2">
            <div class="content-title">
              <span>户名</span>
            </div>
          </el-col>
          <el-col :span="10">
            <span>{{ item.accountName }}</span>
          </el-col>
          <el-col :span="2">
            <div class="content-title">
              <span>账号</span>
            </div>
          </el-col>
          <el-col :span="10">
            <span>{{ item.accountNumber }}</span>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="2">
            <div class="content-title">
              <span>银行</span>
            </div>
          </el-col>
          <el-col :span="10">
            <span>{{ item.bank }}</span>
          </el-col>
          <el-col :span="2">
            <div class="content-title">
              <span>开户行</span>
            </div>
          </el-col>
          <el-col :span="10">
            <span>{{ item.accountBank }}</span>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="2">
            <div class="content-title">
              <span>转账金额</span>
            </div>
          </el-col>
          <el-col :span="10">
            <span>{{ item.amount }}</span>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="2">
            <div class="content-title">
              <span>身份证</span>
            </div>
          </el-col>
          <el-col :span="19">
            <div>
              <pic-view :pic-url-list.sync="item.idCard.urls"
                        upload-class="lang-upload"
                        :pic-name-list.sync="item.idCard.names"
                        :max-size="2"
                        :upload-data="{ picName: 'customer\\' + orderInfo.customerId }"
                        :upload-type="isInfo"
                        @showImg="showAccountImg"></pic-view>
            </div>
          </el-col>
        </el-row>
      </el-row>
    </template>
  </div>
</template>

<style lang="scss">
.account-card {
  margin: 20px 40px !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  border-radius: 5px;
  background-color: #f5f5f54a;
}
</style>

<script>
import '@/style/common.scss'
import '@/style/info.scss'
import picView from '@/components/pic-viewer-up'
import { api } from '@/api'
import { quillEditor } from 'vue-quill-editor'
import { devBaseURL } from '@/utils/http'
import { HTTPSUCCESS, HTTPDATAFAIL, HTTPPARAMFAIL, HTTPUNKOWNFAIL } from '@/components/constant'
import { getToken } from '@/utils/auth'

export default {
  data() {
    return {
    }
  },
  watch: {
    orderInfo: {
      handler: function() {
        this.$emit('update:orderInfo', this.orderInfo)
      }
    }
  },
  props: {
    orderInfo: {
      type: Object,
      default: () => { return {} }
    },
    isInfo: {
      type: Boolean,
      default: false
    }
  },
  components: { picView },
  created() {
  },
  methods: {
    showAccountImg(url) {
      this.$emit('show', url)
    }
  }
}
</script>
